<!-- login -->
<template>
  <div class="loginPage">
    <div class="loginHeader">
      <div class="loginBox">
        <div class="loginLeft">
          <img src="./../../../assets/img/login/logo.png" class="logoImg" @click="goHome"/>
          <div class="heightStyle"></div>
          <div class="loginName">
            <div @click="goHome">首页</div>
            <div @click="goEngineering">工程项目</div>
            <div @click="goEechanics">机械中心</div>
            <div @click="goAddHll">加入轰隆隆</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bodyBox">
      <div class="loginRegion">
        <div class="bodyImgBox">
          <div>
            <img src="./../../../../public/img/login1.png" class="login1" />
          </div>
          <div>
            <img src="./../../../../public/img/login2.png" class="login2" />
          </div>
        </div>
        <div class="loginContainer">
          <div class="listTitle">欢迎登录轰隆隆官网</div>
          <div class="listContainer">
            <div class="listNameLeft">
              <div
                :class="{ listNameLeftName1: currentIndex === 0 }"
                @click="btn(0)"
              >
                快捷登录
              </div>
              <div
                class="listLoginStyle"
                :class="{ listLoginStyle1: currentIndex === 0 }"
              ></div>
            </div>
            <div class="listNameRight">
              <div
                :class="{ listNameLeftName1: currentIndex === 1 }"
                @click="btn(1)"
              >
                密码登录
              </div>
              <div
                class="listLoginStyle"
                :class="{ listLoginStyle1: currentIndex === 1 }"
              ></div>
            </div>
          </div>
          <!-- 密码登录 -->
          <div class="currentTbaBar" v-show="currentIndex == 1">
            <div class="userBox">
              <div class="userNameBox">
                <!-- 只能输入数字 -->
                <input
                  type="text"
                  v-model="userName"
                  class="userName"
                  placeholder="请输入您的手机号"
                  @focus="isUserName"
                />
                <img
                  src="./../../../assets/img/login/deleteIcon.png"
                  class="deleteIcon"
                  @click="deleteBtn"
                  v-if="userName"
                />
              </div>
              <div class="userPassBox">
                <input
                  :type="pwdType"
                  v-model="userPass"
                  class="userPass"
                  placeholder="请输入密码"
                  @focus="isUserPass"
                />
                <img
                  src="./../../../assets/img/login/pawassIcon.png"
                  class="pawassIcon"
                  @click="showPwd"
                  v-if="userPass"
                />
              </div>
            </div>
            <div class="successBox">
              <img
                src="./../../../assets/img/login/success.png"
                class="success"
                v-show="isName || isPawss || isNamePawss"
              />
              <span class="successName" v-show="isName">账号格式错误</span>
              <span class="successName" v-show="isNamePawss"
                >账号或登录密码不正确</span
              >
              <span class="successName" v-show="isPawss">请填写登录密码</span>
            </div>
            <div
              :class="[
                isName || isPawss || isNamePawss
                  ? 'login_submit1'
                  : 'login_submit',
              ]"
              @click="submitLogin"
            >
              登录
            </div>
            <div class="pass_iconBox">
              <span class="Remember_pass1" @click="forgetPassword"
                >忘记密码?</span
              >
            </div>
          </div>
          <!-- 手机验证码登录 -->
          <div class="currentTbaBar" v-show="currentIndex == 0" >
            <div class="userBox">
              <div class="userNameBox">
                <!-- 只能输入数字 -->
                <input
                  type="text"
                  v-model="userName"
                  class="userName"
                  placeholder="请输入您的手机号"
                  maxlength="11"
                  @focus="isUserName1"
                />
                <img
                  src="./../../../assets/img/login/deleteIcon.png"
                  class="deleteIcon"
                  @click="deleteBtn1"
                  v-if="userName"
                />
              </div>
              <div class="userCodeBox">
                <input
                  v-model="userCode"
                  :class="!sendAuthCode ? 'userCode1' : 'userCode'"
                  placeholder="请输入短信验证码"
                  maxlength="6"
                  @focus="isUserCode"
                />
                <span class="btnCode" v-show="sendAuthCode" @click="getAuthCode"
                  >发送验证码</span
                >
                <span class="btnCode" v-show="!sendAuthCode">
                  <span>{{ auth_time }}</span
                  >发送验证码
                </span>
              </div>
            </div>
            <div class="successBox">
              <img
                src="./../../../assets/img/login/success.png"
                class="success"
                v-show="isName1 || isCode"
              />
              <span class="successName" v-show="isName1">账号格式错误</span>
              <span class="successName" v-show="isCode">账号或验证码不正确</span>
            </div>
            <div
              :class="isName1 || isCode ? 'login_submit1' : 'login_submit'"
              @click="submitLogin1"
            >
              登录
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer_name">
        <ul class="footerNameList">
          <li @click="Aboutus">关于我们</li>
          <li @click="messageData">用户协议</li>
          <li @click="contactus">联系我们</li>
          <li @click="cooperation">合作伙伴</li>
        </ul>
        <div class="footerNameBotom">
          <div>
            Copyright © 2015-2020 轰隆隆honglonglong. All Rights Reserved
          </div>
          <div>京ICP备20002211号</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import { getLogin, getSendCode,getPhonecode } from "./../../../apis/api.js"; 
const msgTime = 59;
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      userInfo:{},
      userName: "", // 账户名
      userPass: "", // 密码
      userCode: "", //短信码
      pwdType: "password",
      isName: false, // 账号提示
      isName1: false, //快捷登录的提示
      isPawss: false, // 密码提示
      isNamePawss: false, //账号密码错误提示
      isCode: false, //短信验证码提示
      currentIndex: this.$route.query.tab == 0?1:0, //选项卡,如果从首页注册点进来的显示快捷登录
      sendAuthCode: true,
      auth_time: msgTime,
      resendTimer: null,
      numLogin:''//首页现在预定传递过来的值，判断是否是点现在预定过来的
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    // 清空输入的手机号
    deleteBtn() {
      this.userName = "";
      this.isName = false;
      this.isPawss = false;
      this.isNamePawss = false;
    },
    deleteBtn1() {
      this.userName = "";
      this.isName1 = false;
      this.isCode = false;
    },
    // 返回首页
    goHome() {
      this.$router.push({path:'/homePc',query:{currentIndex:0}})
    },
    goEngineering(){
      this.$router.push({path:"/engineering",query:{currentIndex:1}}); 
    },
    goEechanics(){
      this.$router.push({path:"/mechanicsInfoData",query:{currentIndex:2}});
    },
    goAddHll(){
      this.$router.push({path:"/addUs",query:{currentIndex:3}});
    },
    // 密码登录
    async submitLogin(params) {
      if (this.userName == "") {
        this.isName = true;
        this.isNamePawss = false;
        return;
      }
      if (this.userPass == "") {
        this.isName = false;
        this.isPawss = true;
        return;
      }
      let data = {
        username: this.userName,
        pwd: this.userPass,
      };
      // 登录的api接口
      try {
        let res = await getLogin(data);
        if (res.data.result == "1") {
          // this.$store.commit("userInfo", JSON.stringify(res.data.body));
          window.localStorage.setItem(
            "userInfo",
            JSON.stringify(res.data.body)
          );
          if(this.numLogin ==1){
            this.$router.push({ path: "/mechanicalRent" });
          }else {
            this.$router.push({ path: "/homePc" });
          }
        }
        // 输入密码不正确
        if (res.data.result == "101") {
          this.isName = false;
          this.isPawss = false;
          this.isNamePawss = true;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 快捷登录
    async submitLogin1(params) {
      if (this.userName) {
        if (!/^1[34578]\d{9}$/.test(this.userName)) {
          this.isName1 = true;
          return;
        }
      }
      if (this.userName == "") {
        this.isName1 = true;
        this.isCode = false;
        return;
      }
      if (this.userCode == "") {
        this.isName1 = false;
        this.isCode = true;
        return;
      }
      let data = {
        phone: this.userName,
        code: this.userCode,
      };
      // 登录的api接口
      try {
        let res = await getPhonecode(data);
        if (res.data.result == "1") {
          // 存储在vuex
          // this.$store.commit("userInfo", JSON.stringify(res.data.body));
          window.localStorage.setItem(
            "userInfo",
            JSON.stringify(res.data.body)
          );
          if(this.numLogin ==1){
            this.$router.push({ path: "/mechanicalRent" });
          }else {
            this.$router.push({ path: "/homePc" });
          }
        }
        // 输入密码不正确
        if (res.data.result == "101") {
          this.isName1 = false;
          this.isCode = true;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 忘记密码
    forgetPassword() {
      this.$router.push({ path: "/forgetPasswordPc" });
    },
    varifyPhoneNum(phoneNum) {
      if (!phoneNum) return false;
      let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!myreg.test(phoneNum)) {
        return false;
      } else {
        return true;
      }
    },
    // 获取验证码
    async getAuthCode() {
      let base64phoneNumber = this.userName;
      if (!this.varifyPhoneNum(this.userName)) {
        this.isName1 = true;
        return false;
      }
      this.sendAuthCode = false;
      let params = {
        phone: base64phoneNumber,
      };
      try {
        let res = await getSendCode(params);
        this.resendTimer = setInterval(() => {
          this.auth_time--;
          if (this.auth_time <= 0) {
            this.sendAuthCode = true;
            this.auth_time = msgTime;
            clearInterval(this.resendTimer);
          }
        }, 1000);
        if (res.data.result === 1) {
          this.$message.success("验证码已发送！");
        } else {
          this.$message.error(res.data.message);
        }
      } catch (e) {
        this.resendTimer = setInterval(() => {
          this.auth_time--;
          if (this.auth_time <= 0) {
            this.sendAuthCode = true;
            this.auth_time = msgTime;
            clearInterval(this.resendTimer);
          }
        }, 1000);
      }
    },
    // 选项卡
    btn(key) {
      if (this.currentIndex == 0) {
        this.userName = "";
        this.userCode = "";
        this.isCode = false;
        this.isName1 = false;
      }
      if (this.currentIndex == 1) {
        this.userName = "";
        this.userPass = "";
        this.isName = false;
        this.isPawss = false;
        this.isNamePawss = false;
      }
      this.currentIndex = key;
    },
    // 密码失去焦点取消错误信息提示
    isUserPass(){
      this.isName = false
      this.isNamePawss = false
      this.isPawss = false
    },
    isUserName(){
      this.isName = false
      this.isNamePawss = false
    },
    isUserCode(){
      this.isCode = false
    },
    isUserName1(){
      this.isName1 = false
    },
    Aboutus(){
      this.$router.push({path:'/p_cpf'})
    },
    contactus(){
      this.$router.push({path:'/p_ctu'})
    },
    messageData(){
      this.$router.push({path:'/messageData'}) 
    },
    cooperation(){
      this.$router.push({path:'/p_dinfor'}) 
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
      this.userInfo = localStorage.getItem("userInfo");
      this.numLogin = this.$route.query.num
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.loginPage{
  background: #1f2327;
}
.loginHeader {
  width: 100%;
  height: 56px;
  line-height: 56px;
  background: #fff;
}
.logoImg {
  width: 105px;
  height: 36px;
  cursor: pointer;
}
.heightStyle {
  width: 1px;
  height: 27px;
  background: #c0c4cc;
  margin-left: 31px;
}
.loginBox {
  margin: 0 130px;
  display: flex;
  justify-content: space-between;
}
.loginLeft {
  display: flex;
  align-items: center;
}
.loginName {
  width: 400px;
  font-size: 16px;
  color: #303133;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  cursor: pointer;
}
.bodyBox {
  background: #1f2327;
  width: 100%;
  height: 87vh;
}
.footer {
  border-top: 1px solid #777;
  width: 100%;
  height: 140px;
}
.footer_name {
  display: flex;
  text-align: center;
  flex-direction: column;
  margin-top: 25px;
}
.footerNameList {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  color: #fff;
  li {
    width: 100px;
  }
}
.footerNameBotom {
  margin-top: 18px;
  font-size: 14px;
  color: #c0c4cc;
}
.login1 {
  width: 303px;
  height: 83px;
  margin-left: 130px;
}
.login2 {
  width: 534px;
  height: 417px;
  margin-top: 25px;
}
.bodyImgBox {
  display: flex;
  flex-direction: column;
}
.loginContainer {
  width: 510px;
  height: 490px;
  background: #fff;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.loginRegion {
  display: flex;
  justify-content: space-evenly;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.listTitle {
  font-size: 24px;
  color: #373d41;
  text-align: center;
  margin-top: 80px;
}
.listNameLeft {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  color: #909399;
  cursor: pointer;
}
.listNameRight {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  color: #909399;
  cursor: pointer;
}
.listContainer {
  margin-top: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listNameLeftName1 {
  font-size: 14px;
  color: #ff855b;
}
.listLoginStyle {
  width: 130px;
  height: 1px;
  background: #909399;
  margin-top: 6px;
}
.listLoginStyle1 {
  width: 130px;
  height: 1px;
  background: #ff855b;
  margin-top: 6px;
}
.userBox {
  text-align: center;
  margin-top: 29px;
}
.userName {
  width: 260px;
  min-width: 260px;
  height: 40px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid #d8d8d8;
  padding-left: 10px;
  color: #333;
  font-size: 14px;
}
.userPass {
  width: 260px;
  min-width: 260px;
  height: 40px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid #d8d8d8;
  margin-top: 16px;
  padding-left: 10px;
  color: #333;
  font-size: 14px;
}
.userCode {
  width: 154px;
  min-width: 154px;
  height: 40px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid #d8d8d8;
  margin-top: 16px;
  padding-left: 10px;
  color: #333;
  font-size: 14px;
}
.userCode1 {
  width: 140px;
  min-width: 140px;
  height: 40px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid #d8d8d8;
  margin-top: 16px;
  padding-left: 10px;
  color: #333;
  font-size: 14px;
}
.userNameBox {
  position: relative;
}
.userPassBox {
  position: relative;
}
.btnCode {
  width: 96px;
  height: 40px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 4px;
  color: #fff;
  padding: 10px 13px;
  margin-left: 10px;
  font-size: 14px;
  cursor: pointer;
}
.pawassIcon {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 28px;
  right: 130px;
}
.deleteIcon {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 13px;
  right: 130px;
}
.login_submit {
  width: 260px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  margin: 32px auto 0 auto;
  cursor: pointer;
  text-align: center;
}
.login_submit1 {
  width: 260px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  margin: 22px auto 0 auto;
  cursor: pointer;
  text-align: center;
}
.pass_iconBox {
  margin-right: 75px;
  margin-top: 15px;
  text-align: right;
}
.Remember_pass1 {
  font-size: 14px;
  color: #ff855b;
  cursor: pointer;
  text-decoration: underline;
}
::-webkit-input-placeholder {
  color: #c0c4cc;
  font-size: 14px;
}

::-moz-placeholder {
  color: #c0c4cc;
  font-size: 14px;
}

:-ms-input-placeholder {
  color: #c0c4cc;
  font-size: 14px;
}

:-moz-placeholder {
  color: #c0c4cc;
  font-size: 14px;
}
.successBox {
  display: flex;
  align-items: center;
  margin-left: 120px;
  margin-top: 10px;
}
.success {
  width: 14px;
  height: 14px;
}
.successName {
  color: #f56c6c;
  font-size: 12px;
  margin-left: 10px;
}
</style>
